<template>
  <div class="container">
    <Header></Header>
    <el-row type="flex" justify="start">
      <!-- 主体开始 -->

      <el-col
        :xl="{ span: 10, offset: 6 }"
        :lg="{ span: 10, offset: 6 }"
        :md="{ span: 10, offset: 4 }"
        :sm="{ span: 10, offset: 0 }"
      >
        <ul
          class="infinite-list infiniteScroll"
          v-infinite-scroll="load"
          infinite-scroll-distance="20"
        >
          <li>
            <el-tabs
              type="border-card"
              v-model="mainActiveTab"
              @tab-click="handleClick"
            >
              <el-tab-pane label="关注" name="first">
                <li
                  v-for="(index) in count"
                  class="infinite-list-item"
                  :key="index"
                >
                  <el-card>
                    <el-row>
                      <el-col :span="15">
                        <div class="title">
                          <a href="#" @click="toInfo">
                            我是一个标题，我是一个长的标题
                          </a>
                        </div>
                        <p class="content">
                          &emsp;&emsp;最关键的就是用上了新一代的骁龙8+，换成了台积电4nm制程工艺，功耗控制和发热都有很大的提升，虽然参数上看性能升级不大，但是却能持续释放，不会出现比较严重的发热降频现象，所以实际体验层面的提升是很明显的。
                        </p>
                        <el-row>
                          <el-col :span="6" style="text-align: left">
                            <el-link
                              icon="el-icon-arrow-down"
                              type="primary"
                              :underline="false"
                              >阅读全文</el-link
                            >
                          </el-col>
                          <el-col
                            :span="17"
                            style="
                              text-align: right;
                              font-size: 10px;
                              color: #c0cfe3;
                            "
                          >
                            <span style="line-height: 23px">7-21</span>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col
                            :span="10"
                            style="text-align: left; margin-top: 7px"
                          >
                            <el-link type="primary" :underline="false"
                              >赞123</el-link
                            >
                            <el-link type="primary" :underline="false"
                              >&emsp;踩121</el-link
                            >
                          </el-col>
                          <el-col :span="13" style="text-align: right">
                            <el-link
                              icon="el-icon-star-off"
                              type="info"
                              :underline="false"
                              >收藏</el-link
                            >
                            <el-link
                              icon="el-icon-chat-dot-round"
                              type="info"
                              style="margin-left: 15px"
                              :underline="false"
                              >评论</el-link
                            >
                            <el-link
                              icon="el-icon-s-promotion"
                              type="info"
                              style="margin-left: 15px"
                              :underline="false"
                              >分享</el-link
                            >
                            <el-dropdown
                              @command="handleCommand"
                              style="margin-left: 10px"
                              size="mini"
                            >
                              <span class="el-dropdown-link">
                                <li
                                  class="el-icon-more-outline"
                                  style="
                                    color: #409eff;
                                    margin-top: 8px;
                                    margin-right: 9px;
                                  "
                                ></li>
                              </span>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  command="a"
                                  icon="el-icon-warning-outline"
                                  >举报</el-dropdown-item
                                >
                                <el-dropdown-item
                                  command="a"
                                  icon="el-icon-remove-outline"
                                  >不感兴趣</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </el-dropdown>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="9">
                        <div class="pic">
                          <img
                            src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                            class="image"
                          />
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </li>
              </el-tab-pane>
              <el-tab-pane label="推荐" name="second">
                <li
                  v-for="(index) in count"
                  class="infinite-list-item"
                  :key="index"
                >
                  <el-card>
                    <el-row>
                      <el-col :span="15">
                        <div class="title">
                          <a href="#" @click="toInfo">
                            我是一个标题，我是一个长的标题
                          </a>
                        </div>
                        <p class="content">
                          &emsp;&emsp;最关键的就是用上了新一代的骁龙8+，换成了台积电4nm制程工艺，功耗控制和发热都有很大的提升，虽然参数上看性能升级不大，但是却能持续释放，不会出现比较严重的发热降频现象，所以实际体验层面的提升是很明显的。
                        </p>
                        <el-row>
                          <el-col :span="6" style="text-align: left">
                            <el-link
                              icon="el-icon-arrow-down"
                              type="primary"
                              :underline="false"
                              >阅读全文</el-link
                            >
                          </el-col>
                          <el-col
                            :span="17"
                            style="
                              text-align: right;
                              font-size: 10px;
                              color: #c0cfe3;
                            "
                          >
                            <span style="line-height: 23px">7-21</span>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col
                            :span="10"
                            style="text-align: left; margin-top: 7px"
                          >
                            <el-link type="primary" :underline="false"
                              >赞123</el-link
                            >
                            <el-link type="primary" :underline="false"
                              >&emsp;踩121</el-link
                            >
                          </el-col>
                          <el-col :span="13" style="text-align: right">
                            <el-link
                              icon="el-icon-star-off"
                              type="info"
                              :underline="false"
                              >收藏</el-link
                            >
                            <el-link
                              icon="el-icon-chat-dot-round"
                              type="info"
                              style="margin-left: 15px"
                              :underline="false"
                              >评论</el-link
                            >
                            <el-link
                              icon="el-icon-s-promotion"
                              type="info"
                              style="margin-left: 15px"
                              :underline="false"
                              >分享</el-link
                            >
                            <el-dropdown
                              @command="handleCommand"
                              style="margin-left: 10px"
                              size="mini"
                            >
                              <span class="el-dropdown-link">
                                <li
                                  class="el-icon-more-outline"
                                  style="
                                    color: #409eff;
                                    margin-top: 8px;
                                    margin-right: 9px;
                                  "
                                ></li>
                              </span>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  command="a"
                                  icon="el-icon-warning-outline"
                                  >举报</el-dropdown-item
                                >
                                <el-dropdown-item
                                  command="a"
                                  icon="el-icon-remove-outline"
                                  >不感兴趣</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </el-dropdown>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="9">
                        <div class="pic">
                          <img
                            src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                            class="image"
                          />
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </li>
              </el-tab-pane>
              <el-tab-pane label="热门" name="third"
                ><li
                  v-for="(index) in count"
                  class="infinite-list-item"
                  :key="index"
                >
                  <el-card>
                    <el-row>
                      <el-col :span="15">
                        <div class="title">
                          <a @click="toInfo()">
                            我是一个标题，我是一个长的标题
                          </a>
                        </div>
                        <p class="content">
                          &emsp;&emsp;最关键的就是用上了新一代的骁龙8+，换成了台积电4nm制程工艺，功耗控制和发热都有很大的提升，虽然参数上看性能升级不大，但是却能持续释放，不会出现比较严重的发热降频现象，所以实际体验层面的提升是很明显的。
                        </p>
                        <el-row>
                          <el-col :span="6" style="text-align: left">
                            <el-link
                              icon="el-icon-arrow-down"
                              type="primary"
                              :underline="false"
                              >阅读全文</el-link
                            >
                          </el-col>
                          <el-col
                            :span="17"
                            style="
                              text-align: right;
                              font-size: 10px;
                              color: #c0cfe3;
                            "
                          >
                            <span style="line-height: 23px">7-21</span>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col
                            :span="10"
                            style="text-align: left; margin-top: 7px"
                          >
                            <el-link type="primary" :underline="false"
                              >赞123</el-link
                            >
                            <el-link type="primary" :underline="false"
                              >&emsp;踩121</el-link
                            >
                          </el-col>
                          <el-col :span="13" style="text-align: right">
                            <el-link
                              icon="el-icon-star-off"
                              type="info"
                              :underline="false"
                              >收藏</el-link
                            >
                            <el-link
                              icon="el-icon-chat-dot-round"
                              type="info"
                              style="margin-left: 15px"
                              :underline="false"
                              >评论</el-link
                            >
                            <el-link
                              icon="el-icon-s-promotion"
                              type="info"
                              style="margin-left: 15px"
                              :underline="false"
                              >分享</el-link
                            >
                            <el-dropdown
                              @command="handleCommand"
                              style="margin-left: 10px"
                              size="mini"
                            >
                              <span class="el-dropdown-link">
                                <li
                                  class="el-icon-more-outline"
                                  style="
                                    color: #409eff;
                                    margin-top: 8px;
                                    margin-right: 9px;
                                  "
                                ></li>
                              </span>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  :command="a"
                                  icon="el-icon-warning-outline"
                                  >举报</el-dropdown-item
                                >
                                <el-dropdown-item
                                  :command="a"
                                  icon="el-icon-remove-outline"
                                  >不感兴趣</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </el-dropdown>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="9">
                        <div class="pic">
                          <img
                            src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                            class="image"
                          />
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </li>
              </el-tab-pane>
            </el-tabs>
          </li>
        </ul>
      </el-col>
      <!-- 主体结束 -->

      <!-- 侧边栏开始 -->
      <el-col
        :xl="{ span: 3 }"
        :lg="{ span: 3 }"
        style="margin-left: 64%; margin-top: 20px"
        class="aside hidden-md-and-down"
      >
        <div style="width: 225px">
          <el-card class="box-card">
            <el-row>
              <el-col :span="24" style="font-size: 14px; text-align: left">
                <i class="el-icon-user">&nbsp;晚上好，爷傲奈我何</i>
              </el-col>
            </el-row>
            <el-divider class="splitline"></el-divider>
            <el-row>
              <el-col style="text-align: left; font-size: 14px">
                <i class="el-icon-view">&nbsp;最近阅读</i>
              </el-col>
            </el-row>
            <div v-for="o in 4" :key="o" style="text-align: left">
              <el-link
                class="recentread"
                :underline="false"
                style="font-size: 12px"
              >
                作者：我是一个很长的标题，多余的。。。
              </el-link>
            </div>
            <el-divider class="splitline"></el-divider>
            <el-row>
              <el-col :span="6">
                <el-button
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  @click="toArticle"
                  >创作</el-button
                >
              </el-col>
            </el-row>
          </el-card>

          <el-carousel
            height="200px"
            class="advertisement"
            direction="vertical"
          >
            <el-carousel-item v-for="item in 4" :key="item">
              <img
                class="adv-img"
                src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
              />
            </el-carousel-item>
          </el-carousel>

          <el-card class="box-card" style="margin-top: 3px">
            <el-row>
              <span>24小时排行</span>
            </el-row>
            <el-row :gutter="50" type="flex" justify="center">
              <el-col :span="22">
                <el-tabs v-model="asideActiveTab" @tab-click="handleClick">
                  <el-tab-pane label="阅读" name="first">
                    <div v-for="o in 8" :key="o" style="text-align: left">
                      <el-link
                        class="recentread"
                        :underline="false"
                        style="font-size: 12px"
                      >
                        <el-row>
                          <el-col :span="3">
                            <el-avatar
                              shape="circle"
                              :size="16"
                              fit="cover"
                              src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                              class="smallavatar"
                            ></el-avatar>
                          </el-col>
                          <el-col :span="21">
                            <span class="recentread"
                              >:我是一个很长的标题，多余的。。。</span
                            >
                          </el-col>
                        </el-row>
                      </el-link>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="点赞" name="second">
                    <div v-for="o in 8" :key="o" style="text-align: left">
                      <el-link
                        class="recentread"
                        :underline="false"
                        style="font-size: 12px"
                      >
                        <el-row>
                          <el-col :span="3">
                            <el-avatar
                              shape="circle"
                              :size="16"
                              fit="cover"
                              src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                              class="smallavatar"
                            ></el-avatar>
                          </el-col>
                          <el-col :span="21">
                            <span class="recentread"
                              >:我是一个很长的标题，多余的。。。</span
                            >
                          </el-col>
                        </el-row>
                      </el-link>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="分享" name="third">
                    <div v-for="o in 8" :key="o" style="text-align: left">
                      <el-link
                        class="recentread"
                        :underline="false"
                        style="font-size: 12px"
                      >
                        <el-row>
                          <el-col :span="3">
                            <el-avatar
                              shape="circle"
                              :size="16"
                              fit="cover"
                              src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                              class="smallavatar"
                            ></el-avatar>
                          </el-col>
                          <el-col :span="21">
                            <span class="recentread"
                              >:我是一个很长的标题，多余的。。。</span
                            >
                          </el-col>
                        </el-row>
                      </el-link>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <!-- 侧边栏结束 -->
    </el-row>
    <el-backtop target=".infiniteScroll"></el-backtop>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
export default {
  data() {
    return {
      count: 0,
      asideActiveTab: "first",
      mainActiveTab: "first",
    }
  },
  components: { Header },
  methods: {
    load() {
      this.count += 2;
    },
    // 跳转详情页
    toInfo() {
      console.log("我进来了");
      this.$router.push({
        path: "/info",
      });
    },
    // 跳转写文章页面
    toArticle (){
      this.$router.push({
        path: "/article"
      })
      
    },
    handleClick(){

    }
  },
};
</script>

<style scoped>
.infinite-list {
  overflow: auto;
}
.infinite-list-item {
  list-style-type: none;
  height: 190px;
  margin-top: 5px;
}

.title > a {
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  color: black;
}
.pic {
  display: inline;
  margin: 0 auto;
  height: 200px;
  width: 250px;
}
.pic > img {
  width: 250px;
  height: 150px;
}
.content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  margin: 0;
  line-height: 25px;
  margin-top: 10px;
}

.splitline {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.recentread {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  margin: 0;
  line-height: 22px;
}
.advertisement {
  margin-top: 3px;
  padding: 0 !important;
}
.adv-img {
  height: 230px;
  width: 220px;
}
.smallavatar {
  margin-top: 2px;
}
.infiniteScroll {
  position: absolute;
  height: 780px;
}
.infiniteScroll > li {
  position: relative;
  width: 704px;
}
.aside {
  position: fixed;
}
ul {
  padding: 0;
}
</style>
